<template>
    <div class="comment-container">
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="请输入要吐槽的内容（最多bb120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button> 
        <div class="comment-list" v-for="(item,i) in comments" :key="item.add_time">
            <div class="comment-item">
                <div class="comment-title">第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：2{{item.add_time|dateFormat}}</div>
                <div class="comment-content">{{item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button> 
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
    export default{
        data(){//用来存放属于这个组件的似有数据
            return{
                pageindex:1, //默认展示第一页的评论数据
                comments:[],//评论内容的数组
                msg:''
            }
        },
        created(){
            this.getCommentsByPage();
        },
        methods:{
            getCommentsByPage(){
                //根据页码获取当前的评论数据
                this.$http.get('http://vue.studyit.io/api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(result=>{
                    if(result.body.status === 0){
                        // this.comments = result.body.message;//加载更多时，会顶替最开始到数据
                        //为了实现加载更多到需求，我们把最新的评论数据，通过数组到拼接，重新赋值给comments，从而防止之前的数据评论被覆盖的问题；
                        this.comments = this.comments.concat(result.body.message);
                    }else{
                        Toast("获取评论失败！");
                    }
                })

            },
            getMore(){
                //加载更多评论
                this.pageindex++;
                this.getCommentsByPage();
            },
            postComment(){
                if(this.msg.trim().length<=0){
                    //如果没有输入评论内容，不让发表
                    return Toast('评论内容不能为空！')
                }
                //点击发表评论
                //参数1 ：请求的URL地址
                //参数2:发送给服务器的数据对象{content:''}
                //参数3:指定要发送给服务器的数据的表单提交格式 {emulateJSON:true}
                this.$http.post('api/postcomment/'+this.id,{content:this.msg.trim()}).then(result => {
                    if(result.body.status === 0){
                        //加载最新的评论：
                        //分析：加载最新评论有两种方式：
                        //1.调用getCommentsByPage 获取最新评论，如果用户看到了第2页或者其他更多的评论，这时候，如果调用getCommentsByPage 方法，默认只能家在某一页的数据；
                        //2.不重新调用 getCommentsByPage 方法获取最新的评论，而是在客户端，使用 JS 的形式，把最新的评论，组织称一个评论对象，然后手动 unshift 到 this.comments 里面去
                        this.comments.unshift({
                            user_name:'匿名用户',
                            add_time:Date.now(),
                            content:this.msg
                            });
                        this.msg = ''
                    }else{
                        Toast('发表评论失败！');
                    }
                })

            }
        },
        props:['id']//使用props存放父组件传递过来的ID值
    }

</script>
<style lang="scss" scoped>
    .comment-container{
        textarea{
            margin:0;
            font-size:14px;
        }
        .comment-list{
            .comment-item{
                font-size:14px;
                .comment-title{
                    background-color: #ccc;
                    line-height: 30px;
                }
                .comment-content{
                    text-indent:2em;
                    line-height: 38px;
                }
            }
        }
    }

</style>
